<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <form action="targetUrl" onsubmit="return check()">
            <div>
                <label>
                    <input checked onclick="showTeacher()" type="radio" value="1" name="a">
                    教师
                </label> 
                <label>
                    <input onclick="showStudent()" type="radio" value="2" name="a">
                    学生
                </label>
            </div>
            <span id="title">工号</span> 
            <input type="text" id="username">
            <span id="username_msg" style="color:red"></span>
            <br>
            密码<input type="password" id="password">
            <br>
            <input type="submit" value="登录">
            <input type="reset" value="重置">
        </form>
    </div>

<script>
function g(name){
    return document.getElementById(name);
}
function showStudent(){
    g('title').innerHTML = '学号'
}
function showTeacher(){
    g('title').innerHTML = '工号'
}
function check(){
    //数据校验
    var username = g('username');
    var password = g('password');
    //数据不能为空
    if(username.value==''){
        username.style.border = "solid 1px red"
        username.focus()
        g("username_msg").innerHTML = '请输入用户名'
        return false;
    }
    if(password.value==""){
        alert("请输入密码");
        return false;
    }
    if(!/^[0-9A-Za-z]{6,20}$/.test(password.value)){
        alert("密码格式输入不正确")
        return false
    }
    return true;
}
</script>

</body>
</html>

